<template>
  <van-space
    direction="vertical"
    :size="20"
    fill
  >
    <van-field
      v-model="content"
      label="示例内容"
      type="textarea"
      label-align="top"
      autosize
      clickable
    />
    <van-field label="展示行数">
      <template #input>
        <view class="stepper-cover">
          <van-stepper v-model="rows" />
        </view>
      </template>
    </van-field>
    <van-field
      v-model="extendText"
      label="展开按钮文本"
      input-align="right"
    />
    <van-field
      v-model="ellipsisText"
      label="收起按钮文本"
      input-align="right"
    />
    <van-divider>示例</van-divider>
    <AppEllipsis
      :content="content"
      :rows="rows"
      :extendText="extendText"
      :ellipsisText="ellipsisText"
    />
  </van-space>
</template>

<script setup lang="ts">
const content = ref<string>(
  'Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。'
)
const rows = ref<number>(3)
const extendText = ref<string>('展开')
const ellipsisText = ref<string>('收起')
</script>

<style lang="scss" scoped>
uni-page-body {
  padding: 24rpx 0;
}
:deep(.van-field) {
  border-radius: $uni-border-radius-base;
  border-color: $uni-bg-color;
  background-color: $cell-bg-color;
  .van-cell__title {
    color: $uni-text-color-base;
  }
  .van-field__control {
    color: $uni-text-color-base;
  }
}
.stepper-cover {
  width: 100%;
  text-align: right;
}
</style>
